<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>这是一个自动导入的组件</p>
    <p>插件：{{ $myPlugin('World') }}</p>
    <a-button @click="handleClick">message</a-button>
    <p>count：{{ counterStore.count }}</p>
    <p>doubleCount：{{ counterStore.doubleCount }}</p>
    <a-button @click="counterStore.increment">+1</a-button>
    <p>useState：{{ counter }}</p>
    <a-button @click="counter++">修改useState的值</a-button>
    <a-button @click="handleAdd">修改useState的值</a-button>
    <a-button @click="setUserInfoCookie">存储cookie</a-button>
    <a-button @click="getUserInfoCookie">获取cookie</a-button>
    <p>{{ data?.data?.userInfo }}</p>
    <i-ep:camera />
    <i-ant-design:alipay-circle-outlined />
  </div>
</template>

<script setup lang="ts">
import { useCounter } from '~/compostables/state'
import { useCounterStore } from '~/store/counter'
import { userInfoFetch } from '~/compostables/useHttpFetch'

interface UserInfo {
  userId: number
  username: string
}

const { $myPlugin, $message } = useNuxtApp()
const counterStore = useCounterStore()

// useState
// const counter = useState('counter', () => 1)
const counter = useCounter()

// useCookie
const setUserInfoCookie = () => {
  const userInfoCookie = useCookie<UserInfo>('userInfo', { maxAge: 60 })
  userInfoCookie.value = { userId: 1, username: 'ikun' }
}

const getUserInfoCookie = () => {
  const userInfoCookie = useCookie<UserInfo>('userInfo')
  console.log('userInfoCookie', userInfoCookie.value)
}

const handleClick = () => {
  $message.success('111')
}

const handleAdd = () => {
  counter.value++
}
// const { data, pending, status, error, refresh } = await useFetch(
//   '/api/modules',
//   {
//     server: false,
//   }
// )

// const { data: userData } = await userInfoFetch({})
// console.log('userData', userData.value)

const { data } = await useFetch('/api/auth/login', {
  method: 'post',
  server: true,
  body: {
    phone: '18800000000',
    password: '123456',
  },
})
</script>
